<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">
  <xi:include href="layout.html" />
  <head>
    <title>Test View</title>
    <script type="text/javascript">
    //<![CDATA[
    var reference = jQuery.tree.reference;
    var myLayout;
    jQuery(document).ready(function($) {
        jQuery("#asynctree").tree({
            data: {
                async: true,
                type: "json",
                opts: {
                    url: "${href.test(node.id)}"
                }
            },
            ui: {
                theme_name: "custom"
            },
            types: {
                "default": {
                    draggable: false
                }
            },
            callback: {
                beforedata: function(NODE) { return { root: jQuery(NODE).attr("node_id") || $node.id } },
                onselect: function(NODE, TREE_OBJ) { load_page(jQuery(NODE).attr("node_id"), "part"); }
            }
        });
        myLayout = jQuery("#top").layout({});
        load_page($node.id, "part");
    });

    function refresh_tree(node_id) {
        if (node_id == $node.id) {
            reference("asynctree").refresh();
        } else {
            reference("asynctree").refresh(jQuery("#node_" + node_id));
        }
    }

    var loading_html = '<div id="content-pane-loading">Loading...</div>';

    function post_attachment(id, url) {
        var options = {
            url: url,
            success: function(data) {
                load_page(id, "part");
            }
        };
        $("#attachment").ajaxSubmit(options);
        jQuery("#content-pane").html(loading_html);
    }

    function load_attachment(id, form) {
        var url = form.attr("action");
        jQuery.get(url + "?" + form.serialize(), function(data) {
            var tmp = jQuery(data).find("#content");
            var x = tmp.find("#attachment").attr("action", url)
            x.find("[type=submit]").each(function() {
                var e = jQuery(this);
                if (e.attr("name") == "cancel") {
                    e.click(function() {
                        load_page(id, "part");
                        return false;
                    });
                } else {
                    e.click(function() {
                        post_attachment(id, url);
                        return false;
                    });
                }
            });
            jQuery("#content-pane").empty().append(tmp);
        });
        jQuery("#content-pane").html(loading_html);
    }

    function load_page(id, suffix) {
        var page = "${href.test()}" + "/" + id + "/" + suffix;
        jQuery.get(page, function(data, textStatus, xhr) {
            var tmp = jQuery(data).find("#detail_content");
            if (tmp.size() == 1) {
                tmp.find("#attachfile").submit(function(event) {
                    load_attachment(id, jQuery(event.target));
                    return false;
                });
                jQuery("#content-pane").empty().append(tmp);
            } else {
                // TODO: error message
                jQuery("#content-pane").empty().html(textStatus);
            }
        });
        jQuery("#content-pane").html(loading_html);
    }

    function post_page(form, id, suffix, query, parent_id) {
        query = query || "";
        jQuery.post("${href.test()}" +  "/" + id + "/" + suffix,
                    jQuery(form).serialize() + query,
                    function(data, status) {
                        var tmp = jQuery(data);
                        var tmp0 = tmp.find("#warning");
                        var tmp1 = tmp.find("#detail_content");
                        jQuery("#content-pane").empty().append(tmp0).append(tmp1);
                        if (tmp0.size() == 0 && parent_id)
                            refresh_tree(parent_id);
                    });
        return false;
    }

    function top_layout() {
        var h = jQuery(window).height();
        var pos = jQuery("#top").position();
        jQuery("#top").height(h - pos.top - pos.left);
    }
    jQuery(window).resize(top_layout);
    jQuery(window).load(function() {
        top_layout();
        myLayout.resizeAll();
    });

    //]]>
    </script>
    <style type="text/css">
        .ui-layout-pane {
            padding: 10px;
            overflow: auto;
        }
        .ui-layout-resizer { background: #DDD; } 
        .ui-layout-toggler { background: #AAA; } 
        #top {
            border: 1px solid;
            border-color: #bbb;
            height: 400px;
            min-height: 400px;
        }
        #content-pane {
            height: 200px;
        }
        #tree-pane {
            white-space: nowrap;
        }
    </style>
  </head>

  <body>
    <div id="top">
      <div id="content-pane" class="ui-layout-center"></div>
      <div id="tree-pane" class="ui-layout-west">
        <a href="#" onClick="load_page($node.id, 'part')">$node.name</a>
        [<a href="#" onClick="reference('asynctree').refresh()">refresh</a>]
        <div id="asynctree"></div>
      </div>
    </div>
    <div align="center"></div>

    <div id="help"><strong>Note:</strong> 
      See <a href="${href.wiki(TracTestManagement)}">TracTestManagement</a> for help on creating test suite and test case.
    </div> 

  </body>
</html>

